<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>数字时钟</title>
</head>
<body>
    <div id="clock">
        <h2>The time is now</h2>
        <div id="time">
            <div><span id="hour">00</span><span>Hours</span></div>
            <div><span id="minute">00</span><span>Minutes</span></div>
            <div><span id="second">00</span><span>Seconds</span></div>
        </div>
    </div>
    <script type="text/javascript">
        var interval = setInterval(()=>{
            let hours = document.getElementById("hour");
            let minutes = document.getElementById("minute");
            let seconds = document.getElementById("second");

            hours.innerHTML = new Date().getHours();
            minutes.innerHTML = new Date().getMinutes();
            seconds.innerHTML = new Date().getSeconds();
        }, 1000);
    </script>
</body>
</html>